<template>
    <div>{{number}}</div>
</template>

<script>
export default {
    props: {
        goal: {
            type: Number
        }
    },
    data() {
        return {
            number: 0
        }
    },
    methods: {
        roll() {
            const interval = setInterval(() => {
                if (this.number < this.goal) {
                    this.number += 1
                } else {
                    clearInterval(interval)
                }
            }, 1);
        }
    },
    mounted() {
        this.roll()
    }
}
</script>

<style>

</style>